/* 文档根元素 定义变量可做全局变量 */
:root {
  --primary-color: #31c27c;
}
body {
  /* 设置外间距为0 */
  margin: 0; 
  /* 背景颜色 */
  background: #f5f5f5;
  /* 字体样式 微软雅黑 */
  font-family: Microsoft Yahei;
  /* 字体大小 */
  font-size: 14px;
  /* min-width: 1000px; */
}
a {
  /* 文字修饰 eg下划线等 */
  text-decoration: none;
  color: #000;
}
header {
  /* 高度 */
  height: 90px;
  /* 背景颜色 */
  background: white;
  /* 弹性布局 最大限度的填充空间 */
  display: flex;
  /* 交叉轴中点对齐*/
  align-items: center;
}
.header-inner, main {
  /* width: 1200px; */
  /* 内间距 */
  padding: 20px;
  /* 外间距 */
  margin: auto;
}
.tag-list {
  /* 上外间距 */
  margin-top: 50px;
  /* 下外间距 */
  margin-bottom: 15px;
}
.tag-item {
  /* 行内块元素 */
  display: inline-block;
  /* 内间距 上下0 左右8 */
  padding: 0 8px;
  /* 外间距 右 */
  margin-right: 24px;
  /* 内部高度 */
  line-height: 26px;
  color: #000;
  /* 文字修饰 */
  text-decoration: none;
}
.tag-active {
  /* 背景颜色 */
  background: var(--primary-color);
  /* 字体颜色 */
  color: white;
}
/* 除tag-active外的*/
.tag-item:not(.tag-active):hover {
  color: var(--primary-color);
}
.nowrap {
  /*空白处理 只保留一个空白 文本不换行*/
  white-space: nowrap;
  /*对溢出内容 隐藏且无滚动条*/
  overflow: hidden;
  /* 对于溢出文本 出现省略符合 */
  text-overflow: ellipsis;
}
.playlist {
  /* 网格布局 */
  display: grid;
  /* 网格列 repeat（）表重复网格值 */
  /*auto-fill根据元素分配空间 没有元素填充时依旧保留 */
  /* mimmax每个元素至少200px 不够换行 多了平均分配 */
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  /* 间距 */
  gap: 45px 15px;
  /* 外间距 底部 */
  margin-bottom: 45px;
}
.cover-wrap {
  /* 弹性布局 能够扩展和收缩flex容器内的元素*/
  display: flex;
  /* 相对位置 设置父层 子层就可以依据父层定位 否则子层就会逐层向上寻找*/
  position: relative;
  /* 溢出隐藏 且不出现滚条*/
  overflow: hidden;
  /* 宽 */
  width: 100%;
  /* 外间距 底部 */
  margin-bottom: 15px;
  /* flex布局中 交叉中心对齐 */
  align-items: center;
  /* 同行子元素在x轴对齐方式 */
  justify-content: center;
  /* 光标 */
  cursor: pointer;
}
.cover-img {
  /* 宽度 */
  width: 100%;
  /* 过渡 过度多个属性 过度时间 */
  transition: all 0.75s;
}
.cover-mask {
/* 绝对位置 脱离文档流的布局 起始位置为最近的父元素*/
  position: absolute;
  left:0;
  top: 0;
  right: 0;
  bottom: 0;
  /* 背景颜色 */
  background: #000;
  /* 透明度 */
  opacity: 0;
  /* 过渡 */
  transition: all 0.5s;
}
.cover-play {
  /* 绝对位置 */
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -35px;
  margin-top: -35px;
  /* 透明度 */
  opacity: 0;
/* 缩放0.7倍 */
  transform: scale(0.7);
  /* 过渡  */
  transition: all 0.5s;
}
.cover-wrap:hover .cover-mask {
  /* 透明度 */
  opacity: 0.2;
}
.cover-wrap:hover .cover-play {
  /* 透明度 */
  opacity: 1;
  /* 缩放1倍 */
  transform: scale(1);
}
.cover-wrap:hover .cover-img {
  /* 缩放 */
  transform: scale(1.07);
}
.album-title:hover {
  /* 字体颜色 */
  color: var(--primary-color);
}
.album-author {
  color: #999;
  /* 内部高度 */
  line-height: 1.6;
}
.album-author:hover {
  /* 字体颜色 */
  color: var(--primary-color);
}
.album-time {
  color: #999;
}
.page {
  /* 弹性布局 */
  display: flex;
  /* 交叉轴中心对齐 */
  align-items: center;
  /* 同行子元素在x轴对齐方式 */
  justify-content: center;
}
.page-item {
  /* 行内块元素 */
  display: inline-block;
  color: #a2a2a2;
  line-height: 50px;
  padding: 0 20px;
  margin: 10px;
  font-size: 16px;
}
.page-current, .page-item:not(.page-more):hover {
  /* 背景颜色 */
  background: var(--primary-color);
  /* 字体颜色 */
  color: white;
}
footer {
  /* 外间距 上 */
  margin-top: 60px;
  /* 背景颜色 */
  background: #333;
  /* 高 */
  height: 200px;
}


